<template>
    <section v-loading="listLoading">
        <div class="box-card mt-20" v-loading="submitReviewStatue">
            <el-row>
                <el-col :span="18">
                    <div class="grid-content title">
                        <h4>{{ tableData.correctiveReportDto.title }}</h4>
                        <p>
                            <!--  <span>整改状态 :</span> {{ dict.corrected_progress_status[tableData.correctiveReportDto.status] }} &nbsp;-->
                        </p>
                    </div>
                </el-col>
                <el-col :span="6"  align="right">

                    
                    <div v-if="tableData.correctiveReportDto.status === 3">

                        <el-button
                          type="primary"

                          @click="submitReportDialogFun"
                      > 提交正式整改文件 </el-button>    <el-button @click="_goBack"> 返 回 </el-button>
                     <span  style="display:block; font-size:12px; color:#888; padding:5px 0 0">请<el-button type="text" @click="dowFile(basis_url + formalFileTemp)" style="font-size:12px; padding:8px!important;">下载整改报告 </el-button>后，附上公章再上传</span>
                 
                    </div>
                       
                    
                    <div v-else-if="[0,1,11,12,41,21].includes(tableData.correctiveReportDto.status )">

                         <el-button  type="primary" :disabled="listLoading" @click="editReport"> 编 辑 </el-button>
                         <el-button  type="primary" :disabled="listLoading || submitReviewStatue" @click="submitBeforeCheckItemImage">提交报告</el-button>
                        
                        <el-button @click="_goBack"> 返 回 </el-button>
                        <div>
                            <el-button type="text" @click="wordPreview">预览整改报告word版</el-button>
                        </div>
                     
                    </div>

                   <el-button v-else @click="_goBack"> 返 回 </el-button>



                </el-col>
            </el-row>
            <el-row>

                   <detail-common :tableData="tableData" v-if="!listLoading" />
                <!-- 
                <el-col :span="24">
                    <div>
                        <span style="font-size: 16px; color: rgb(51, 51, 51);">综合意见</span>
                        <p style=" color: #666;line-height: 28px; margin:0 0 35px;">{{tableData.correctiveReportDto.suggestion}}</p>
                    </div>
                </el-col>
             
                <el-col :span="24">
                    <el-tabs v-model="activeName" @tab-click="tabHandleClick" >
                        <el-tab-pane :label="'整改区 ( ' + reformNumber + '项 )'" name="corrected">
                            <el-col :span="24">
                                <div class="item-colum">
                                    <span class="item-column-title" style="font-size:16px; color:#333">整改工作情况</span>
                                    <el-input
                                            v-if="tableData.correctiveReportDto.suggestion&&tableData.correctiveReportDto.suggestion.length !== ''"
                                            :autosize="{ minRows: 4}"
                                            resize="none"
                                            class="showTextConter"
                                            type="textarea"
                                            v-model="tableData.correctiveReportDto.suggestion"
                                            readonly>
                                    </el-input>
                                    <p v-else>未填写整改工作情况</p>
                                </div>
                                <ul class="corrected-item">
                                    <li v-for="(item, index) in tableData.correctiveItems" :key="index">
                                        <div v-if=" item.correctiveItemDto.status === 1 || item.correctiveItemDto.status == 3" class="list-item">

                                            <p class="check-item-desc">
                                                {{ item.checkItemDescDTO.check_item_three_order_number + ' ' + item.checkItemDescDTO.check_item_three }}
                                            </p>
                                            <div class="item-title-s step1">
                                                检查信息
                                            </div>
                                            <div class="item-content ">
                                        <div class="check-item-images item-column" v-if="item.checkItemDescDTO.image_list.length > 0">
                                                <span class="item-column-title">图片</span>
                                                <ul class="image-list">
                                                    <li v-for="(imageItem, index) in item.checkItemDescDTO.image_list" :key="index">
                                                        <img :src="basis_url + imageItem.path" alt="" />
                                                    </li>
                                                </ul>
                                            </div>
                                            <div class="check-item-building-room item-column" v-if="item.checkItemDescDTO.building_room.length > 0">
                                                <span class="item-column-title">涉及房间</span>
                                                <div>
                                                    <el-tag
                                                            v-for="(tagRoom, index) in item.checkItemDescDTO.building_room"
                                                            :key="index"
                                                            type="success"
                                                            style="margin-right:15px;"
                                                    >
                                                        {{tagRoom.building}}
                                                    </el-tag>
                                                </div>
                                            </div>
                                            <div class="check-item-building-info item-column" v-if="item.checkItemDescDTO.desc.length > 0">
                                                <span class="item-column-title">描述信息</span>

                                                <el-input
                                                        :autosize="true"
                                                        type="textarea"
                                                        resize="none"
                                                        class="showTextConter"
                                                        v-model="item.checkItemDescDTO.desc"
                                                        readonly>
                                                </el-input>

                                            </div>
                                            </div>
                                           
                                            <div class="item-title-s step2">
                                                整改信息
                                            </div>
                                         
                                            <el-row :gutter="40" v-for="(checkItemInfo, checkItemindex) in item.correctiveItemDto.check_item_info" :key="checkItemindex">
                                                 <div v-if="checkItemInfo.images.length || checkItemInfo.reason.length || checkItemInfo.measure.length || checkItemInfo.files.length">
                                                <div class="items-column-row">
                                                         <span class="items-column-row-title">整改内容 {{checkItemindex + 1}}</span>
                                                        <el-row :gutter="40">
                                                        <el-col :span="24">
                                                            <div class="check-item-effect-images items-column-row-column">
                                                                <span class="item-column-title">图片</span>
                                                                <ul class="image-list" v-if="checkItemInfo.images.length > 0">
                                                                    <li v-for="(imageItem, imageIndex) in checkItemInfo.images" :key="imageIndex">
                                                                        <img :src="basis_url + imageItem.path" alt="" @click="handlePictureCardPreview({url:imageItem.path})"/>
                                                                    </li>
                                                                </ul>
                                                                <p v-else style="line-height:16px; margin:0;">
                                                                    暂无
                                                                </p>
                                                            </div>
                                                        </el-col>
                                                       
                                                    </el-row>

                                                    <el-row :gutter="40">
                                                        <p></p>
                                                        <p></p>
                                                        <el-col :span="24">
                                                            <div class="check-item-cause items-column-row-column">
                                                                <span class="item-column-title">原因分析</span>
                                                                <el-input
                                                                        type="textarea"
                                                                        resize="none"
                                                                        autosize
                                                                        class="showTextConter"
                                                                        placeholder="未填写原因分析"
                                                                        v-model="checkItemInfo.reason"
                                                                        readonly>
                                                                </el-input>
                                                            </div>
                                                        </el-col>
                                                        <el-col :span="24">
                                                            <div class="check-item-effect items-column-row-column">
                                                                <span class="item-column-title">整改措施与结果</span>
                                                                <el-input
                                                                        type="textarea"
                                                                        resize="none"
                                                                        autosize
                                                                        class="showTextConter"
                                                                        placeholder="未填写整改措施与结果"
                                                                        v-model="checkItemInfo.measure"
                                                                        readonly>
                                                                </el-input>
                                                            </div>
                                                        </el-col>
                                                         <el-col :span="24" >

                                                            <div class="check-item-effect-file items-column-row-column" >
                                                                <span class="item-column-title">附件</span>
                                                                <div v-if="checkItemInfo.files && checkItemInfo.files.length > 0">
                                                                    <a v-for="(fileItem, filesIndex) in checkItemInfo.files"
                                                                       href="javascript:;"
                                                                       @click="downloadFile(fileItem.path,fileItem.origin_name)"
                                                                       :key="filesIndex"
                                                                    >
                                                                        {{ fileItem.origin_name }}
                                                                    </a>
                                                                </div>
                                                                <p v-else style="line-height:16px; margin:0;">
                                                                    暂无
                                                                </p>
                                                            </div>
                                                        </el-col>
                                                    </el-row>

                                                </div>
                                                 </div>
                                            </el-row>
                                         

                                            <div>
                                                <div class="item-title-s step3">
                                                    批注信息
                                                </div>

                                                 <div class="" v-if="item.correctiveItemDto.audit && $route.query.s==='1' || [3,4,41,21].includes(tableData.correctiveReportDto.status )|| item.correctiveItemDto.audit_reason !== '' &&  item.correctiveItemDto.audit_reason">
                                                    <div style="margin-bottom:20px;margin-top:20px;" >
                                                        <el-tag type="success" v-if="item.correctiveItemDto.audit===1">合格</el-tag>
                                                        <el-tag type="danger" v-else>不合格</el-tag>

                                                    </div>
                                                    <div>
                                                        <el-input
                                                         :autosize="{ minRows:2}"
                                                           class="showTextConter"
                                                                readonly=""
                                                                type="textarea"
                                                             
                                                                v-model="item.correctiveItemDto.audit_reason">
                                                        </el-input>
                                                    </div>
                                                </div>
                                               
                                            </div>



                                        </div>
                                    </li>
                                </ul>
                            </el-col>
                        </el-tab-pane>
                        <el-tab-pane :label=" '待整改区 ( ' +  unReformNumber + ' 项  )'" name="unCorrected" v-show='paneShow'>
                            <el-col :span="24">
                                <ul class="corrected-item">
                                    <li v-for="(item, index) in tableData.correctiveItems" :key="index">
                                        <div v-if="item.correctiveItemDto.status === 2" class="list-item">
                                            <p class="check-item-desc">
                                                {{ item.checkItemDescDTO.check_item_three_order_number + ' ' + item.checkItemDescDTO.check_item_three }}
                                            </p>
                                            <div class="item-title-s step1">
                                                检查信息
                                            </div>
                                            <div class="item-content">
                                        <div class="check-item-images item-column" v-if="item.checkItemDescDTO.image_list.length > 0">
                                                <span class="item-column-title">图片</span>
                                                <ul class="image-list">
                                                    <li v-for="(imageItem, index) in item.checkItemDescDTO.image_list" :key="index">
                                                        <img :src="basis_url + imageItem.path" alt="" @click="handlePictureCardPreview({url:imageItem.path})" />
                                                    </li>
                                                </ul>
                                            </div>
                                            <div class="check-item-building-room item-column"  v-if="item.checkItemDescDTO.building_room.length > 0">
                                                <span class="item-column-title">涉及房间</span>
                                                <div>
                                                    <el-tag
                                                            v-for="(tagRoom, index) in item.checkItemDescDTO.building_room"
                                                            :key="index"
                                                            type="success"
                                                            style="margin-right:15px;"
                                                    >
                                                        {{tagRoom.building}}
                                                    </el-tag>
                                                </div>
                                            </div>
                                            <div class="check-item-building-info item-column" v-if="item.checkItemDescDTO.desc.length > 0">
                                                <span class="item-column-title">问题描述</span>
                                                <p>
                                                    <el-input
                                                             :autosize="{ minRows: 4}"
                                                            type="textarea"
                                                            resize="none"
                                                            ref="qaaa"
                                                            class="showTextConter"
                                                            v-model="item.checkItemDescDTO.desc"
                                                            readonly>
                                                    </el-input>
                                                </p>
                                            </div>
                                              </div>
                                             <div class="item-title-s step1">
                                            未整改信息
                                            </div>
                                              <div class="item-content" v-if='item.correctiveItemDto.no_reason&&item.correctiveItemDto.no_reason.length || item.correctiveItemDto.no_reason_files&& item.correctiveItemDto.no_reason_files.length'>

                                                <div class="check-item-corrected item-column">
                                                <span class="item-column-title">未整改原因及未来整改计划</span>
                                                <el-input
                                                        v-if="item.correctiveItemDto.no_reason && item.correctiveItemDto.no_reason != ''"
                                                         :autosize="{ minRows: 4}"
                                                        type="textarea"
                                                        resize="none"
                                                        class="showTextConter"
                                                        v-model="item.correctiveItemDto.no_reason"
                                                        readonly>
                                                </el-input>
                                                <p v-else style="line-height:16px; margin:0;">
                                                    暂无
                                                </p>
                                            </div>
                                            <div class="check-item-effect-file item-column">
                                                <span class="item-column-title">附件</span>
                                                <div v-if="item.correctiveItemDto.no_reason_files && item.correctiveItemDto.no_reason_files.length > 0">
                                                    <a v-for="(fileItem, index) in item.correctiveItemDto.no_reason_files"
                                                       href="javascript:;"
                                                       @click="downloadFile(fileItem.path,fileItem.origin_name)"
                                                       :key="index">
                                                       {{ fileItem.origin_name }}
                                                    </a>
                                                </div>
                                                <p v-else style="line-height:16px; margin:0;">
                                                    暂无
                                                </p>
                                                <br>
                                            </div>

                                            </div>
                                               <p v-else  class="item-content"  style="line-height:36px; margin:0;">暂无</p>
                                            
                                          
                                            
                                        </div>
                                    </li>
                                </ul>
                            </el-col>
                        </el-tab-pane>
                    </el-tabs>
                </el-col>-->
            </el-row> 
        </div>
        <el-dialog
                title="提交正式整改文件"
                class="submit-report-dialog"
                :visible.sync="submitReportDialog"
                width="30%"
                :before-close="handleClose">
            <p>注：请上传盖章的最终版本扫描件 <br/>（与提交的纸质文件一致，带照片、附件等）</p>
            <el-upload
                    class="upload-demo release-upload"
                    drag
                    action=""
                    :limit="1"
                    ref="reportFormalFileUpload"
                    :on-exceed="handleExceed"
                    :on-success="handleAvatarSuccess"
                    :on-change="handleChangeFiles"
                    :on-remove="handleChangeFiles"
                    :http-request="httpRequest"
                    :show-file-list="true"
                    :file-list="fileLists"
                    :auto-upload="false"
                    multiple>
                <i class="el-icon-upload"></i>
                <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                <div class="el-upload__tip" slot="tip" style="color:#999">只能上传PDF，Word文件，大小不超过10MB</div>
            </el-upload>
            <el-input type="textarea" :rows="4" v-model="reportDesc" placeholder="请输入备注信息，200字以内"></el-input>
            <span slot="footer" class="dialog-footer">
                <el-button @click="submitReportDialog = false"> 取 消 </el-button>
                <el-button :loading="saveLoading" type="primary" @click="submitReportReady"> 提 交 </el-button>
              </span>
        </el-dialog>
        <el-dialog :visible.sync="dialogShowImages">
            <img width="100%" :src="dialogImageUrl" alt="">
        </el-dialog>
    </section>
</template>

<script>
    import detailCommon from './detailCommon'
    import {checkInfo} from '@/mixin/checkInfo'
    import { getCorrectedProgressData, submitReview } from '../../api/corrected_api'
    import { saveAs } from '../../common/js/commons';
    import dict from '../../common/js/dict';
    import {upload_file} from "../../api/common";
    import {  submitReportFormalFile, get_file,generate_report_word} from '../../api/corrected_api'
    export default {
        name:'高校整改进度详情',
        components:{
          detailCommon 
        },
        data() {
            return {
                //表格数据
                tableData: {
                    correctiveReportDto: {
                        title: ''
                    }
                },
          
                paneShow:true,
                formalFileTemp:'',
                submitReportDialog: false,
                submitReportDialogStatus: false,
                fileLists :[],
                reportDesc: '',
                dict: dict,
                reviewDesc:'',
                activeName:'corrected',
                reformNumber:0,
                unReformNumber:0,
                corrective_report_id: this.$route.params.id,
                basis_url: "",
                dialogImageUrl: '',
                dialogShowImages:false,
                listLoading:true,
                saveLoading:false,
                submitReviewStatue:false

            }
        },
        created() {
            this.getTableData()
       
        },
 
        methods: {
            checkInfo,
           async wordPreview(){


              let res = await generate_report_word({"corrective_report_id":this.corrective_report_id})

               if (res.data.status===200) {
                   let file = this.basis_url+JSON.parse(res.data.datas).path
                   saveAs(file, '')
               }

            },
            handleClose() {
                this.reportDesc = '';
                this.submitReportDialog = false;
            },
            submitReportReady() {
                if(this.fileLists.length == 0)  return this.$message.error('请选择整改报告的扫描件!');
                if(this.reportDesc.length == 0)  return this.$message.error('请输入整改总结!');
                this.$refs.reportFormalFileUpload.submit();
            },
            submitReportDialogFun() {
                this.submitReportDialog = true
            },
            submitReport(result){
              
                this.submitReportDialogStatus= true;
                let params = {
                    corrective_report_id: this.tableData.correctiveReportDto.id,
                    file_id: result.id,
                    corrective_summary: this.reportDesc
                }
                submitReportFormalFile(params).then(res => {
                    let result = JSON.parse(res.data.datas);
                     this.saveLoading=false
                    if (res.data.status == 200) {
                        this.getTableData();
                        this.submitReportDialog = false;
                        this.submitReportDialogStatus= false;
                        this.$message.success('报告提交成功!');
                         this.$router.push('/univ_corrected/list');
                    } else {
                        if (res.data.status === 401) {
                            this.$router.push('/login');
                        }
                        this.$message.error(res.data.msg);
                        this.submitReportDialogStatus= false;
                    }
                })
            },
            // 上传前对文件的大小的判断
            beforeAvatarUpload (file) {
                // const extension = file.name.split('.')[1] === 'pdf'
                const isLt2M = file.size / 1024 / 1024 < 2
                // if (!extension) {
                //    this.$message.error('上传模板只能是本地 pdf 格式!');
                // }
                if (!isLt2M) {
                    this.$message.error('上传模板大小不能超过 2MB!');
                }
                //return extension && isLt2M;
                return isLt2M;
            },
            handleExceed(files, fileList) {
                this.$message.warning(`限制只能上传1个文件`);
            },
            handleAvatarSuccess(res, file) {
                this.fileLists = [{'name': file.name, 'url': URL.createObjectURL(file.raw)}];
            },
            handleChangeFiles(file, files) {
                this.fileLists = files;
            },
            httpRequest(item,fileLists) {
                  this.saveLoading=true
                let formData = new FormData();
                formData.append('file', item.file);
                upload_file(formData).then((res) => {
                    let result = JSON.parse(res.data.datas);
                    if (res.data.status == 200) {
                        this.submitReport(result)
                    } else {
                        if (res.data.status === 401) {
                            this.$router.push('/login');
                        }
                        this.$message.error(res.data.msg);
                        this.fileLists = [];
                    }
                });
            },
            dowFile(fileUrl){
                get_file({id:this.tableData.correctiveReportDto.current_file_id}).then(res => {

                    if(res.status === 200 && res.data.status === 200) {
                        saveAs(res.data.datas, '')
                    }
                })
            },


            getTableData() {
                getCorrectedProgressData({corrective_report_id:this.$route.params.id}).then(res => {
                    if (res.data.status == 200) {
                        let temp_data = JSON.parse(res.data.datas);
                        temp_data.correctiveItems.map((item, index) => {
                            if(item.correctiveItemDto.status == 1|| item.correctiveItemDto.status == 3) this.reformNumber ++
                            if(item.correctiveItemDto.status == 2 ) this.unReformNumber ++
                        })
                        this.tableData = temp_data;
                           setTimeout(()=>{
                                this.paneShow = false
                        },200)
                        this.listLoading = false;
                    } else {
                        if (res.data.status == 401) {
                            this.$router.push('/login');
                        }
                        this.$message.error(res.data.msg);
                    }
                })
            },
            handlePictureCardPreview(file) {
                this.dialogImageUrl = file.url;
                this.dialogShowImages = true;
            },
            handleClose() {
                this.reviewSuggest = '';
                this.submitReview = false;
            },
            downloadFile(url, name){
                saveAs(url, name)
            },
            submitBeforeCheckItemImage() {
                let imgZeroList = []
                if(!this.tableData.correctiveReportDto.suggestion||this.tableData.correctiveReportDto.suggestion === '') return this.$message.error('请填写整改工作情况')
                this.tableData.correctiveItems.map((item,index) => {
                    if(item.correctiveItemDto.status == 1){
                        let imgItemLength = false
                        item.correctiveItemDto.check_item_info.every((imgItem, imgIndex) => {
                            if(imgItem.images.length > 0) {
                                imgItemLength = false
                                return false
                            } else {
                                imgItemLength = true
                                return true
                            }
                        })
                        if(imgItemLength) imgZeroList.push(item.checkItemDescDTO.check_item_three_order_number)
                    }
                })
                if(imgZeroList.length > 0) {
                    let tipsText = ''
                    imgZeroList.map((text, index) => {
                       if(index == imgZeroList.length - 1) {
                            tipsText = tipsText + ' ' + text + '  '
                        } else{
                           tipsText = tipsText + ' ' + text + '，  '
                       }
                    })
                    this.$confirm('检测到检查项 ' + tipsText + ' 中未添加任何图片信息，是否继续提交？', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(()=>{
                        this.submitReviewConfirm()
                    })
                } else {
                    this.submitReviewConfirm()
                }
            },
            submitReviewConfirm() {
                this.$confirm('整改报告提交后不可撤回，确认提交此报告吗？', '提交报告确认', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(()=>{
                    this.submitReviewStatue = true;
                    submitReview({"corrective_report_id":this.$route.params.id}).then(res => {
                        if(res.status == 200 && res.data.status == 200){
                            this.$notify({
                                title: '提示',
                                message: '报告提交成功！',
                                type: 'success',
                                duration: 2000
                            })
                            this._goBack();
                        }  else {
                            if (res.data.status == 401) {
                                this.$router.push('/login');
                            }
                            this.$message.error(res.data.msg);
                            this.submitReviewStatue = false;
                        }
                    })
                });
            },

            editReport() {
                this.$router.push('/univ_corrected/edit/' + this.corrective_report_id )
            },
            _goBack() {
                this.$router.push('/univ_corrected/list')
            },
            tabHandleClick(tab, event) {
                // this.$nextTick( () => {
                //     console.log( this.$refs.qaaa)
                //     if(this.$refs.qaaa){
                //         this.$refs.qaaa.resizeTextarea();
                //     }
           
                // });
            },
        }
    }
</script>
<style >
      .check-item-effect-file{
        min-height:50
    }
      .check-item-images{
                            display:table;
                        
                        }
</style>
<style scoped lang="scss" >
    .mt-20{
        margin-top: 20px;
    }
  
    .box-card{
        padding: 20px 40px;
        .grid-content{
            &.title{
                h4{
                    font-size:24px;
                    color:#101010;
                    margin:0;
                }
                p{
                    display:inline-block;
                    width:200px;
                    color:#333;
                    span{
                        color:#888;
                    }
                }
            }
        }
        .corrected-title{
            font-size:18px;
            color:#101010;
            padding:35px 0 10px;
            line-height:18px;
        }
        .items-column-row{
            background:#f7f7f7;
            overflow:hidden;
            margin:0 20px 20px;
            padding: 20px 40px;
            .items-column-row-title{
                line-height: 20px;
                display: block;
                font-size:16px;
                padding: 20px 0 10px;
                font-weight: bold;
                color: #333;
            }
            .items-column-row-column{
                margin: 10px 0 20px;
            }
        }
        .corrected-item{
            list-style:none;
            padding-left:0;
            li{
                .check-item-desc{
                    font-size:16px;
                    color:#333;
                    line-height: 28px;
                    margin-bottom:0;
                }
                div{
                    &.item-column{
                        padding:30px 0 0;
                    }
                    &.list-item{
                        border:1px solid #e6e6e6;
                        padding:10px 40px;
                        margin-bottom:20px;
                      
                    }
                    &.top-border{
                        border-top:1px solid #e6e6e6;
                        margin-top:20px;
                    }
                    .image-list{
                        width:100%;
                        height:100px;
                        padding: 0;
                        li{
                            width:100px;
                            height:100px;
                            float:left;
                            list-style:none;
                            padding:0;
                            border:1px solid #efefef;
                            margin-right:15px;
                            overflow:hidden;
                            border-radius:8px;
                            img{
                                width:100%;
                                height:100%;
                            }
                        }
                    }
                    p{
                        font-size:14px;
                        color:rgba(102, 102, 102, 1);
                        line-height:24px;
                    }
                    span{
                        &.item-column-title{
                            font-size:14px;
                            font-weight:bold;
                            color:#333;
                            display:block;
                            margin-bottom:10px;
                            line-height:26px;
                        }
                    }
                }
            }
        }
    }
</style>
